import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

/**
 * @method PieDoughnut
 * @prop {String} width  宽度 px||%
 * @prop {String} height 高度 px||%
 * @prop {String} id 指定id,默认为line
 * @prop {Array} dataSource  展示数据
 * @prop {Array} legend
 * @prop {Function} dataFormatter 数据的format 如 '{b}: {@2012} ({d}%)'
 * @prop {Function} tooltipFormatter 数据值tooltip的format 如 '{c} %'
 * @prop {Object} total 中间展示全部的信息
 */
// 字符串模板 模板变量有：

// {a}：系列名。
// {b}：数据名。
// {c}：数据值。
// {d}：百分比。
// {@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。
// {@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。

export default function PieDoughnut({
  width = 1000,
  height = 500,
  dataSource,
  id = 'pie',
  legend,
  dataFormatter = undefined,
  tooltipFormatter = undefined,
  total = null,
}) {
  const chart = useRef(null);
  useEffect(() => {
    if (dataSource.length > 0) {
      const valueFormatter = dataFormatter
        ? {
            formatter: dataFormatter,
          }
        : {};
      const tipFormatter = tooltipFormatter
        ? {
            formatter: tooltipFormatter,
          }
        : {};
      const totalInfo = total
        ? {
            title: {
              text: total.title,
              x: 'center',
              y: total.y || '120px',
            },
            graphic: {
              //图形中间文字
              type: 'text',
              left: 'center',
              top: '150px',
              style: {
                text: total.value,
                textAlign: 'center',
                fill: '#000',
                fontSize: 24,
              },
            },
          }
        : {};
      chart.current = echarts.init(document.getElementById(id));
      chart.current.setOption({
        ...totalInfo,
        label: {
          ...valueFormatter,
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b}: {c} ({d}%)',
          ...tipFormatter,
        },
        legend: {
          orient: 'horizontal',
          left: 'right',
          data: legend,
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],

            labelLine: {
              show: true,
            },
            minShowLabelAngle: 0.1,
            data: dataSource,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      });
    }
  }, [dataSource]);

  useEffect(() => {
    window.addEventListener('resize', () => {
      chart.current && chart.current.resize();
    });
    return () => {
      window.removeEventListener('resize', () => {
        chart.current && chart.current.resize();
      });
    };
  }, []);

  return <div id={id} style={{ width: width, height: height }} />;
}
